import ChartTitle from '@/components/Visual/chartTitle';
import { useState } from 'react';
import './index.less';
import type { EntryRates } from '../types';
function TopPayRate(props: { payRates: EntryRates[] }) {
  const [PayData] = useState([
    {
      name: '',
      value: 0,
      color: 'rgba(255, 193, 0, 0.1)',
      borderColor: '#FFC100',
    },
    {
      name: '',
      value: 0,
      color: 'rgba(255, 119, 52, 0.1)',
      borderColor: '#FF7734',
    },
    {
      name: '',
      value: 0,
      color: 'rgba(102, 225, 223, 0.1)',
      borderColor: '#66E1DF',
    },
  ]);
  const { payRates } = props;
  if (payRates.length) {
    for (let i = 0; i < payRates.length; i++) {
      PayData[i].name = payRates[i].parkingLotName;
      PayData[i].value = payRates[i].payRate * 100;
    }
    // PayData[0].name = payRates[0].parkingLotName;
    // PayData[0].value = payRates[0].payRate * 100;
    // PayData[1].name = payRates[1].parkingLotName;
    // PayData[1].value = payRates[1].payRate * 100;
    // PayData[2].name = payRates[2].parkingLotName;
    // PayData[2].value = payRates[2].payRate * 100;
  }

  return (
    <div className="top_pay_rate">
      <div className="title">
        <ChartTitle title="缴费率TOP3" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div className="view_box">
        {PayData.map((item, i) => (
          <div className="item" key={item.color}>
            <div className="title_valueRate">
              <div className="title1">
                <div
                  className="ranking"
                  style={{ background: item.color, border: `0.5px solid ${item.borderColor}` }}
                >
                  <span>{i + 1}</span>
                </div>
                <span className="name">{item.name}</span>
              </div>
              <div className="valueRate">
                <span>{item.value.toFixed(2)}</span>
                <span>%</span>
              </div>
            </div>
            <div className="bar">
              <div className="ranking_bar" style={{ width: `${item.value}%` }}>
                <div className="circle">
                  <div className="inner" />
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default TopPayRate;
